import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List, Map} from 'immutable';

import {Row, Col, Icon, Form, Modal} from 'antd';
import classNames from 'classnames';
import noop from 'util/noop';

import Receipt from '../../common/receipt';


@Relax
export default class OrderInfo extends Component {
    static defaultProps = {
        addressList: List(),
        receiptId: '',
        chooseShippingAddress: noop,
        saveShippingAddress: noop
    }


    constructor(props) {
        super(props);

        this.state = {
            addState: false,
            showAll: false,
            addVisible: false,
            confirmLoading: false,
            receipt: Map()
        }
    }


    render() {
        const {addressList, receiptId} = this.props;
        const {showAll, addVisible, confirmLoading, receipt} = this.state;

        return (
            <div className="choose-address">
                <div className="step-tit clearfix">
                    <h3>选择收货地址：
                        <div className="pull-right">
                            <a href="javascript:void(0);" onClick={()=>this.setState({'showAll': !showAll})}>{`${showAll ? '收起' : '显示全部地址'}`}</a>
                        </div>
                    </h3>
                </div>
                <div className="step-cont">
                    <Row gutter={12} className="address-list clearfix">
                        {
                            addressList.filter((v, index)=>showAll || index < 4).map((address, index)=>{
                                let curClass = classNames("bd", {'cur': receiptId == address.get('receiptId')});
                                let defaultClass = classNames("default-mark", {'hide': address.get('defaultReceipt') != '1'});
                                let {province, city, area, detailAddress, receiptUserName, phone} = this.spiltArea(address.toJS());

                                return (
                                    <Col span={6} key={index}>
                                        <div className={curClass} onClick={()=>this.chooseShippingAddress(address.get('receiptId'))}>
                                            <div className="address-item">
                                                <b></b>
                                                <span className={defaultClass}>默认地址</span>
                                                <div className="inner">
                                                    <h4 className="addr-hd">
                                                        <span className="ov-ct" title={[province, city].join(" ")}>{[province, city].join(" ")}</span>
                                                        <span className="ml10">（<span className="ov-ct name">{receiptUserName}</span>收）</span>
                                                    </h4>
                                                    <div className="addr-bd">
                                                        <span className="mr3">{area}</span>
                                                        <span className="mr3" title={detailAddress}>{detailAddress.length < 7 ? detailAddress : detailAddress.substr(0,7) + '...'}</span>
                                                        <span className="mr3">{phone}</span>
                                                    </div>
                                                    <div className="addr-toolbar">
                                                        <p className="tr">
                                                            <a href="javascript:void(0);"
                                                               onClick={()=>this.editReceipt(address)}>修改</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })
                        }
                        {
                            addressList.count() < 4 || (showAll && addressList.count() < 10)
                                ?
                                <Col span={6}>
                                    <div className="bd" onClick={()=>this.changeReceiptVisible(true)}>
                                        <div className="address-item add-new">
                                            <b></b>
                                            <div className="inner">
                                                <div className="add-btn">
                                                    <Icon type="plus-circle-o" className="font-28 pushtt pushb"/>
                                                    <div>添加新地址</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </Col>
                                :
                                null
                        }
                    </Row>
                </div>
                <Modal title="新增收货地址"
                       visible={addVisible}
                       confirmLoading={confirmLoading}
                       width="620"
                       maskClosable={false}
                       onOk={()=>this.saveReceipt()}
                       onCancel={()=>this.changeReceiptVisible(false)}><Receipt ref="receipt" receipt={receipt} type={0}/></Modal>
            </div>
        )
    }

    editReceipt(receipt) {
        this.setState({
            receipt: receipt,
            addVisible: true
        })
    }


    changeReceiptVisible(addVisible) {
        this.refs.receipt && this.refs.receipt.resetFields();
        this.setState({
            addVisible,
            receipt: Map()
        })
    }


    saveReceipt() {
        const {saveShippingAddress} = this.props;


        this.refs.receipt.validateFields((errors, values)=>{
            if (!errors) {
                this.setState({confirmLoading: true});
                const {cascader:[province, city, area], ...rest} = values;
                saveShippingAddress(Object.assign({}, rest, {province, city, area})).then(()=>{
                    this.refs.receipt.resetFields();
                    this.setState(
                        {
                            confirmLoading: false,
                            addVisible: false
                        });
                }).catch(()=>{
                    this.setState({confirmLoading: false});
                });
            }
        })
    }


    chooseShippingAddress(receiptId) {
        this.props.chooseShippingAddress(receiptId);
    }


    spiltArea(receipt) {
        const {province, city, area, detailAddress, mobilePhone, receiptUserName, ...rest} = receipt;

        return {
            province: province.split('-')[1],
            city: (city || '-').split('-')[1],
            area: (area || '-').split('-')[1],
            detailAddress,
            receiptUserName,
            phone: mobilePhone || rest.fixPhone
        }
    }
}